<template>
<el-row>
  <el-col style="margin: 16px 0;">
    <sea-table-title title="通道日志" subtitle="树形结构可以反映出了kettle的脚本之间的依赖，暂不深入设计此功能。避免使用kettle写逻辑，脚本不宜复杂嵌套。"></sea-table-title>
  </el-col>

  <sea-request url="/kettle/channel/log/page" :result-parser="resultParser" :params="params" :auto-load="false">
    <el-row slot-scope="{response, reload, loading}">
      <el-col>
        <sea-skeleton :data="response" :loading="loading">
          <el-tree v-if="response" default-expand-all :expand-on-click-node="false"
                   :data="response" @node-click="(e)=> console.log(e)">
          </el-tree>
        </sea-skeleton>
      </el-col>
    </el-row>
  </sea-request>
</el-row>
</template>

<script>
export default {
    name: "ChannelLogTree"
    , props: {
        // 作业ID
        guid: {type: String, default: undefined},
    }
    , watch: {
        guid: {
            handler: function (val) {
                this.reload(val);
            }
        }
    }
    , data() {
        return {
            params: {}
        }
    }
    , methods: {
        /**
         * 查询结果转换为树形结构
         */
        resultParser: function (data) {
            let list = this.$bamboo.wrapList(data.list, {id: 'channelId', pid: 'parentChannelId', label: 'objectName'});
            return this.$bamboo.toTree(list);
        }
        /**
         * 重新加载数据
         *
         * @param id 查询参数
         */
        , reload: function (id) {
            this.params = {idBatch: id, page: 1, limit: 9999};
        }
    }
}
</script>

<style scoped>

</style>